import React, {Component} from "react";
import {statusList} from "../../fetch/fetchApi";
import GridTable from '../../components/display/gridTable';
import locale from 'antd/lib/date-picker/locale/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';
import { Button , Row, Col} from 'antd';
import {DatePicker, message} from "antd/lib/index";
const { MonthPicker } = DatePicker;


class StateLogList extends Component {

    constructor (props) {
        super(props);
        this.props = props;
        this.state = {
            gridData: [],
            loading: !1,
            loadingmes: '查询',
            btnloading: !1,
            pagination: {
                total: 0
            }
        };
        this.init();
    }

    init () {
        this.query = {
            page: '1',
            pagecount: '10',
            stubId: this.props.stubId
        };
        // 设置表头
        this.tableColumns = [
            {
                title: '上报时间',
                dataIndex: 'time',
                key: 'time'
            }, {
                title: '状态码',
                dataIndex: 'status',
                key: 'status'
            }, {
                title: '状态信息',
                dataIndex: 'statusName',
                key: 'statusName',
                className: 'column-nowrap'
            }
        ];
    }

    // 渲染后执行
    componentDidMount () {
        this.buildingApplyCb();
    }

    // 上报时间修改
    onDataChange (e) {
        this.query['month'] = e && e.format('YYYY-MM').toString();
    }

    // 状态日志列表
    async findStateLogList () {
        this.setState({
            loading: !0,
            btnloading: !0
        });
        try {
            const resData = await statusList(this.query);
            if (resData.data.code === '200') {
                const pagination = {
                    total: resData.data.pageLimit.totalCount,
                    onShowSizeChange: (current) => {
                        this.turnPage(current)
                    },
                    onChange:(current) => {
                        this.turnPage(current)
                    }
                }
                this.setState({
                    pagination
                });
                return resData.data.data;
            }
        } catch (e) {
            console.log(e);
        }
    }

    // 跳转页码
    turnPage (current) {
        this.query['page'] = current.toString();
        this.buildingApplyCb();
    }

    buildingApplyCb () {
        this.findStateLogList().then((data) => {
            this.setState({
                loading: !1,
                btnloading: !1,
                gridData: data
            });
        });
    }

    render () {
        const Content = <div className="sc-page-content">
            <div className="page-toolbar">
                <Row gutter={8}>
                    <Col lg={6} xl={6}>
                        <MonthPicker defaultValue={moment(new Date(), 'YYYY-MM-DD')} onChange={this.onDataChange.bind(this)} locale={locale}/>
                    </Col>
                    <div  className="button-inlineBlock">
                        <Button type="primary" onClick={this.buildingApplyCb.bind(this)}>{this.state.loadingmes}</Button>
                    </div>
                </Row>
            </div>
            <div className="page-panel">
                <GridTable postyle="table-center" data={this.state.gridData} columns={this.tableColumns} loading={this.state.loading} pagination={this.state.pagination}/>
            </div>
        </div>;

        return Content;
    }

}
export default StateLogList;